<!-- 商品轮播图 -->
<template>
	<view class="pr goods-swiper">
		<block v-if="idx == 1 || !videoUrl">
			<swiper style="height: 100%;" :autoplay="true" :circular="true" interval="5000" duration="500" @change="goodsSwiperChange">
				<swiper-item v-for="(item, index) in list" :key="index" @click="seeImg">
					<image :src="$Utils.img(item)" mode="aspectFit" style="height: 100%;width: 100%;"></image>
				</swiper-item>
			</swiper>
			<view class="count-box">{{ img_current + 1 }} / {{ list.length }}</view>
		</block>
		<block v-if="videoUrl && idx == 0">
			<view style="height: 100%;"><video :src="videoUrl" style="height: 100%;width: 100%;z-index: 0;position: absolute;top: 0;left: 0;" autoplay="true"></video></view>
		</block>
		<view class="btn-box df-cen" v-if="videoUrl">
			<button class="cu-btn round margin-right" :class="idx == i ? 'bg-orange-red' : ''" v-for="(v, i) in textArr" :key="i" @click="textBtn(i)">{{ v.name }}</button>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			img_current: 0, // 图片轮播图索引
			idx: 0,
			textArr: [
				{
					name: '视频'
				},
				{
					name: '图片'
				}
			]
		};
	},
	props: {
		// 图片集合
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		// 视频路径
		videoUrl: {
			type: String,
			default: ''
		}
	},
	methods: {
		seeImg() {
			this.$Utils.previewImage(this.img_current, this.list);
		},
		goodsSwiperChange(e) {
			this.img_current = e.detail.current;
		},
		textBtn(i) {
			this.idx = i;
		}
	},
	mounted() {}
};
</script>

<style lang="scss">
.goods-swiper {
	height: 760rpx;
}
.btn-box {
	position: absolute;
	bottom: 60rpx;
	width: 100%;
	.cu-btn {
		background: rgba(100, 100, 100, 0.6);
		color: #fff;
	}
	.bg-orange-red {
		background-image: linear-gradient(45deg, #ff6744, #fd3b5c);
	}
}
.count-box {
	position: absolute;
	padding: 6rpx 24rpx;
	bottom: 20rpx;
	right: 60rpx;
	background: #000000;
	opacity: 0.4;
	border-radius: 60rpx;
	color: #ffffff;
}
</style>
